<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-descriptions title="订单详情" :column="1">
      <a-descriptions-item label="订单号">{{ info.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="订单积分">{{ info.totalCredit }}</a-descriptions-item>
      <a-descriptions-item label="订单价格">{{ info.totalPrice }}</a-descriptions-item>
      <!-- <a-descriptions-item label="备注">{{ info.remark }}</a-descriptions-item> -->
      <a-descriptions-item label="订单状态">
        {{ info.orderStatusText }}
        <a-button type="primary" v-if="info.orderStatus == 1" @click="sendGoods(info.orderNo)">发货</a-button>
      </a-descriptions-item>
      <a-descriptions-item label="下单时间">{{ info.createdAt }}</a-descriptions-item>
    </a-descriptions>
    <!-- <a-divider style="margin-bottom: 32px"/>
    <a-descriptions title="购买人信息" :column="1">
      <a-descriptions-item label="用户姓名">{{ info.userName }}</a-descriptions-item>
      <a-descriptions-item label="联系电话">{{ info.userMobile }}</a-descriptions-item>
    </a-descriptions> -->
    <a-divider style="margin-bottom: 32px" />
    <a-descriptions title="收货人信息" :column="1">
      <a-descriptions-item label="用户姓名">{{ info.consign ? info.consign.consignee : '' }}</a-descriptions-item>
      <a-descriptions-item label="联系电话">{{ info.consign ? info.consign.phone : '' }}</a-descriptions-item>
      <a-descriptions-item label="地址" v-if="info.consign && info.consign.address">{{ info.consign.address }}</a-descriptions-item>
      <template v-if="info.receiver.length > 0">
        <a-descriptions-item :label="item.name" v-for="item in info.receiver" :key="item.name">{{ item.value }}</a-descriptions-item>
      </template>
    </a-descriptions>
    <template v-if="info.express.expressNo">
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="发货信息" :column="1">
        <a-descriptions-item label="物流公司">{{
          info.express ? info.express.expressCompany : ''
        }}</a-descriptions-item>
        <a-descriptions-item label="物流单号">{{ info.express ? info.express.expressNo : '' }}</a-descriptions-item>
        <a-descriptions-item label="发货时间">{{ info.express ? info.express.expressAt : '' }}</a-descriptions-item>
      </a-descriptions>
    </template>
    <a-divider style="margin-bottom: 32px" />

    <div class="title">商品信息</div>
    <a-table
      style="margin-bottom: 24px"
      :row-key="
        (record) => {
          return record.goodsId
        }
      "
      :columns="goodsColumns"
      :data-source="goodsData"
      :pagination="false"
    >
      <span slot="goodsName" slot-scope="text, record">
        <template>
          {{ record.goodsName }}
          <!-- <router-link :to="{ name: 'GoodsOrderReturnEdit', query: { id: record.returnId } }" v-if="record.returnId" title="点击查看详情">
            {{ record.refundStatusText }}
          </router-link> -->
        </template>
      </span>
    </a-table>

    <send-goods-form ref="createModal" :visible="visible" :model="mdl" @cancel="handleCancel" @ok="handleOk" />
  </a-card>
</template>

<script>
import SendGoodsForm from './modules/SendGoodsForm'

export default {
  name: 'GoodsOrderEdit',
  components: {
    SendGoodsForm
  },
  data() {
    return {
      goodsColumns: [
        {
          title: '商品编号',
          dataIndex: 'goodsId'
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' }
        },
        {
          title: '所需积分',
          dataIndex: 'credit'
        },
        {
          title: '所需费用',
          dataIndex: 'marketPrice'
        },
        {
          title: '数量',
          dataIndex: 'goodsNum',
          align: 'right'
        }
      ],
      id: this.$route.params.id || '',
      info: {},
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      goodsData: [],
      mdl: {}, // 发货弹框
      visible: false // 发货弹框
    }
  },
  mounted() {
    // 获取信息
    this.formInit()
  },
  methods: {
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.$message.error('参数错误')
        // 跳转到目的路由
        this.$router.push({ name: 'OrderList' })
      }
    },
    // 编辑信息
    getInfo() {
      this.$common.getInfo('/orders/detail?orderNo=' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          this.info = result
          this.goodsData = result.goods
        } else {
          this.$message.error(data.msg)
          // 跳转到目的路由
          this.$router.push({ name: 'OrderList' })
        }
      })
    },
    // 发货
    sendGoods(orderNo) {
      if (+this.info.goodsCategoryId === 2) {
        this.mdl = {
          orderNo
        }
        this.visible = true
      } else { // 虚拟商品
        this.$common.handlePost('/orders/express', { orderNo })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getInfo()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          this.$message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
      }
    },
    handleOk() {
      this.visible = false
      // 刷新表格
      this.getInfo()
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.zone-span {
  display: inline-block;
  margin-left: 2%;
  cursor: pointer;
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
